<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>园区咨询</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="css/commonStyle.css" rel="stylesheet"/>
<style type="text/css" class="init">
#example th.delete_line{border: solid 0px white;} 
#example td.add_line{border-bottom: solid 1px black;}
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
	//控制表格下边线
    $('#example tfoot').find('th').addClass('delete_line');
    //$('#example tr:last').find('td').addClass('add_line');
	//在表格加入下拉框筛选
    $('#example').DataTable( {
        initComplete: function () {
            var api = this.api();
 
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
					var newD=d;
					if(newD.length>10){
						newD=newD.substring(0,10)+"..."
					}
                    select.append( '<option value="'+d+'">'+newD+'</option>' )
                } );

            } );
        }
    } );
    $(document).ready(function() {
    var table = $('#example').DataTable();
 //表格的行多选
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 //将选中行删除
    $('#Popups_in_btn1').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );
} );
</script>
</head>

<body>
<!--the outeset wrap starts-->
<div class="container" style="margin:0px; width:1060px;">
  <div class="row show-grid">
  	<h3 align="center">园区资讯</h3>
  </div>
  <div class="row show-grid unified-border">
    <table id="example" class="display" cellspacing="0">
      <thead>
        <tr>
          <th>标题</th>
          <th>分类</th>
          <th>来源</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>最后操作时间</th>
		  <th>编辑</th>
          <th>操作</th>
        </tr>
      </thead>
      
      <tfoot>
      	<tr>
          <th>标题</th>
          <th style="visibility:hidden">分类</th>
          <th>来源</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>最后操作时间</th>
		  <th>编辑</th>
        </tr>
      </tfoot>

      <tbody>
        <tr>
         <td>System Architect</td>
          <td><a href="gardenDetailsConsulting.html">Tiger Nixon</a></td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>12/34/40</td>
          <td>63</td>
          <td>
            <a href="gardenNewConsulting.html" style="color:white;"><button class="btn btn-primary" id="GarAc_edi">编辑</button>
            </a>
          </td>
        </tr>
        <tr>
          <td>System Architect</td>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>12/34/40</td>
          <td>12/34/40</td>
          <td>
            <a href="gardenNewConsulting.html" style="color:white;"><button class="btn btn-primary" id="GarAc_edi">编辑</button>
            </a>
          </td>
        </tr>
        <tr>
          <td>System Architect</td>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>12/34/40</td>
          <td>12/34/40</td>
          <td>
            <a href="gardenNewConsulting.html" style="color:white;"><button class="btn btn-primary" id="GarAc_edi">编辑</button>
            </a>
          </td>
        </tr>
        <tr>
          <td>System Architect</td>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>12/34/40</td>
          <td>12/34/40</td>
          <td>
            <a href="gardenNewConsulting.html" style="color:white;"><button class="btn btn-primary" id="GarAc_edi">编辑</button>
            </a>
          </td>
        </tr>
        <tr>
          <td>System Architect</td>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>12/34/40</td>
          <td>12/34/40</td>
          <td>
            <a href="gardenNewConsulting.html" style="color:white;"><button class="btn btn-primary" id="GarAc_edi">编辑</button>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row show-grid">
    <a href="gardenNewConsulting.html" style="color:white;">
    	<button class="btn btn-primary col-md-1 btn-style-new" style="margin-left:180px;">
    新建</button>
    </a>
    <button class="btn btn-primary col-md-1 btn-style-new" id="Confirm_up">上线</button>
    <button class="btn btn-primary col-md-1 btn-style-new" id="Confirm_down">下线</button>
    <button class="btn btn-primary col-md-1 btn-style-new">置顶</button>
    <button class="btn btn-primary col-md-1 btn-style-new" id="Confirm">删除</button>
    <!--  	<table border="1">
      <tr>
        <td>
        	<button class="btn btn-primary col-md-4"></button>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
</table>--> 
    
  </div>
  <!--top part ends-->
</div>
<!--the outeset wrap ends-->
<!-- 上线的确认弹窗 开始 -->
        <div id="Popups_upline" class="Popup_out_st">
            <div id="Con_box_up" class="Popup_in_st">
                <img src="images/close.png" id="closePopups_up" class="Close_Popups"/>
                <label class="Popup_label">确认上线</label>
                <hr class="Popup_in_hr"/>
                <p class="Popup_in_p">确定发布所选条目到前端？</p>
                <button class="btn btn-primary" id="Popups_up_btn1" style="width: 60px;margin-left: 80px;margin-top: 8px;float: left;">是</button>
                <button class="btn btn-primary" id="Popups_up_btn2" style="margin-left: 50px;margin-top: 8px;width: 60px;float: left;">否</button>
            </div>
        </div>
<!-- 上线的确认弹窗 结束 -->
<!-- 下线的确认弹窗 开始 -->
        <div id="Popups_downline" class="Popup_out_st">
            <div id="Con_box_down" class="Popup_in_st">
                <img src="images/close.png" id="closePopups_down" class="Close_Popups"/>
                <label class="Popup_label">确认下线</label>
                <hr class="Popup_in_hr"/>
                <p class="Popup_in_p">确定将所选条目下线？</p>
                <button class="btn btn-primary" id="Popups_down_btn1" style="width: 60px;margin-left: 80px;margin-top: 8px;float: left;">是</button>
                <button class="btn btn-primary" id="Popups_down_btn2" style="margin-left: 50px;margin-top: 8px;width: 60px;float: left;">否</button>
            </div>
        </div>
<!-- 下线的确认弹窗 结束 -->
<!-- 删除的确认弹窗 开始 -->
        <div id="Popups" class="Popup_out_st">
            <div id="Con_box" class="Popup_in_st">
                <img src="images/close.png" id="closePopups" class="Close_Popups"/>
                <label class="Popup_label">确认删除</label>
                <hr class="Popup_in_hr"/>
                <p class="Popup_in_p">是否确认删除已选中咨询？</p>
                <button class="btn btn-primary" id="Popups_in_btn1">是</button>
                <button class="btn btn-primary" id="Popups_in_btn2">否</button>
            </div>
        </div>
<!-- 删除的确认弹窗 结束 -->
<script type="text/javascript">
wdh=$(window).width();
hgt=$(window).height();
left=(wdh-330)/2;
www=$(document).width();
hhh=$(document).height();
 $(document).ready(function(){
	//delete box
	$("#Confirm").click(function(){
	$("#Popups").fadeIn("slow");
	$("#page_index").css('overflow','scroll');
	$("#page_index").css('overflow','hidden');
	$("#Con_box").css('margin-left',left);
	$("#Con_box").css('margin-top','270px');
});
	$("#closePopups").click(function(){
	$("#Popups").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});
	
	$("#Popups_in_btn1").click(function(){
	$("#Popups").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});

	$("#Popups_in_btn2").click(function(){
	$("#Popups").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});
	
	//upline box
	$("#Confirm_up").click(function(){
	$("#Popups_upline").fadeIn("slow");
	$("#page_index").css('overflow','scroll');
	$("#page_index").css('overflow','hidden');
	$("#Con_box_up").css('margin-left',left);
	$("#Con_box_up").css('margin-top','270px');
});
	$("#closePopups_up").click(function(){
	$("#Popups_upline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});
	
	$("#Popups_up_btn1").click(function(){
	$("#Popups_upline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});

	$("#Popups_up_btn2").click(function(){
	$("#Popups_upline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});

	//downline box
	$("#Confirm_down").click(function(){
	$("#Popups_downline").fadeIn("slow");
	$("#page_index").css('overflow','scroll');
	$("#page_index").css('overflow','hidden');
	$("#Con_box_down").css('margin-left',left);
	$("#Con_box_down").css('margin-top','270px');
});
	$("#closePopups_down").click(function(){
	$("#Popups_downline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});
	
	$("#Popups_down_btn1").click(function(){
	$("#Popups_downline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});

	$("#Popups_down_btn2").click(function(){
	$("#Popups_downline").fadeOut("slow");
	$("#page_index").css('overflow-y','auto');
});

	$("#page_index ").css('width',www);
});
$(window).resize(function(){
	hgt=$(window).height();
	wdh=$(window).width();
	left=(wdh-330)/2;
	www=$(document).width();
	//delete box
	$("#Con_box").css('margin-left',left);
	$("#Con_box").css('margin-top','270px');
	//upline box
	$("#Con_box_up").css('margin-left',left);
	$("#Con_box_up").css('margin-top','270px');
	//downline box
	$("#Con_box_down").css('margin-left',left);
	$("#Con_box_down").css('margin-top','270px');
	
	$("#page_index ").css('width',www);
});
</script>
</body>
</html>
